<template>
	<view class="content">
		<view @click="login" class="text-area animate__animated animate__backInDown animate__delay-1s">
			<text class="title">{{title}}</text>
		</view>
		<button v-if="canIUse" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '微信一键登录',
				user: {},
				canIUse: false,
				userInfo: {}
			}
		},
		onLoad() {

			this.canIUse != wx.canIUse('button.open-type.getUserInfo')
			console.log(this.canIUse, '20');
		},
		methods: {
			bindGetUserInfo(e) {
				console.log(e.detail.userInfo)
			},
			login() {
				uni.login({
					success(res) {
						console.log(res
							.code,
							'res.code');
						uni.switchTab({
							url: '/pages/home/index'
						})
					}
				})

			},
			getUserInfo() {
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userInfo']) {
							uni.authorize({
									scope: 'scope.userInfo',
									success(res) {
										console.log(res, 'res38');

									}
								}),
								uni.getUserInfo({
									success(res) {
										console.log(res, '用户信息返回');
										self.user = res


									}
								})


						}
					}
				})
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-image: url('https://mypic-1314846466.cos.ap-nanjing.myqcloud.com/login.jpg');
		background-size: cover;
	}

	.logo {
		height: 100vh;
		width: 100vw;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 52rpx;
		color: red;
	}
</style>